<template>
	<view class="content">
		<view class="cart-goods">
						<view class="">
							<view class="one" v-if="num>0">
								<view class="right">
									<image v-if="select" src="../../../static/checkbox-checked.png" mode="" @click="select=false"></image>
									<image v-if="!select" src="../../../static/checkbox-disabled.png" mode="" @click="select=true"></image>
								</view>
								<image
									src="../../../static/home/yeshilandai.png"
									mode="" class="logo"></image>
								<view class="goods-detail">
									<view class="">
										雅诗兰黛护寄小棕瓶雅诗兰
									</view>
									<view class="change">
										<view style="color:#FF5344">699.00积分</view>
										<view class="add">
											<image src="../../../static/icon-input-reduce.png" mode="" @click="reduce"></image>
											<input type="text" v-model="num" style="text-align: center;" />
											<image src="../../../static/icon-input-add.png" mode="" @click="add"></image>
										</view>
									</view>
								</view>
								
							</view>
						</view>
					</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				select:false
			};
		},
		methods: {
			// 加
			add() {
				this.num++
			},
			// 减
			reduce() {
				this.num--
			},
			// 结算
			confirm() {
				uni.navigateTo({
					url: '../order_total/order_total'
				})
			}
		}
	}
</script>

<style lang="scss">
.content {
	width: 722rpx;
	.cart-goods {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	
		.right {
			width: 80rpx;
			text-align: right;
	
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	
		.one {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #efefef;
	
			.goods-detail {
				height: 180rpx;
				width: 400rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
	
				.change {
					display: flex;
					justify-content: space-between;
	
					.add {
						display: flex;
						width: 160rpx;
						margin-right: 20rpx;
						justify-content: space-between;
	
						input {
							width: 50rpx;
						}
					}
	
					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
	
			.logo {
				width: 180rpx;
				height: 180rpx;
			}
		}
	}
}
</style>
